import React, { Component } from "react";
import { Form, Input, Modal, Row, Col, Button } from "antd";
import { openNotificationWithIcon } from "utils/comm";
import chehui from "../../assets/images/chehui.png";
import styles from "./ReturnBackForm.less";

const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 24 },
  wrapperCol: { span: 24 },
};

@Form.create()
class ReturnBackForm extends Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  handleOk = () => {
    const { form, onCancel, dispatch, processInstanceId, getList } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }

      dispatch({
        type: "FlowHandle/recall",
        payload: { processInstanceId, ...values },
      }).then(({ errCode, errMsg }) => {
        if (errCode === 0) {
          onCancel();
          this.openNotificationWithIcon("success", "", "撤回成功");
          if (getList instanceof Function) {
            getList();
          }
        } else {
          this.openNotificationWithIcon("error", "", errMsg);
        }
      });
    });
  };

  render() {
    const { form, onCancel, visible, confirmLoading } = this.props;

    const { getFieldDecorator } = form;

    return (
      <Modal
        title="撤回"
        visible={visible}
        onOk={this.handleOk}
        onCancel={() => onCancel(false)}
        width="582px"
        centered
        destroyOnClose
        className={styles.root}
        hideRequiredMark
        labelAlign="left"
        confirmLoading={confirmLoading}
        footer={[
          <Button key="back" onClick={() => onCancel(false)}>
            取消
          </Button>,
          <Button key="ok" type="primary" onClick={this.handleOk}>
            确认撤回
          </Button>,
        ]}
      >
        <Row>
          <Col span={12} style={{ display: "flex", alignItems: "center" }}>
            <img src={chehui} alt="" />
          </Col>
          <Col span={12}>
            <Form>
              <div>
                <div className={styles.label}>撤回原因：</div>
                <Form.Item label="" {...formItemLayout}>
                  {getFieldDecorator("comment", {
                    rules: [
                      { max: 100, message: "请不要超过100个字符" },
                      { required: true, message: "请输入撤回原因" },
                    ],
                  })(<TextArea placeholder="请输入撤回原因" rows={5} />)}
                </Form.Item>
              </div>
            </Form>
          </Col>
        </Row>
      </Modal>
    );
  }
}

export default ReturnBackForm;
